<template>
  <div>
    <!-- 选择课程 -->
    <el-select
      v-model="value"
      @change="handleChange"
      placeholder="请选择"
      style="width: 100%"
      clearable
      filterable
      :disabled="disabled"
    >
      <el-option
        v-for="item in options"
        :key="item.id"
        :label="item.title"
        :value="item.id"
      >
      </el-option>
    </el-select>
  </div>
</template>
<script>
import { sysCourseQuery } from '@/api/admin/courseLibrary/sysCourse.js'
export default {
  data() {
    return {
      value: [],
      options: [],
      listQuery: {
        page: 1,
        limit: 999,
        courseType: 6,
        sourceType: '',
        auditStatus: '2',
        status: '1',
      },
    }
  },
  props: {
    defaultValue: String,
    courseType: {
      type: String,
      default: 1,
    },
    sourceType: {
      type: String,
      default: '',
    },
    disabled: {
      type: Boolean,
      default: false,
    },
  },
  watch: {
    defaultValue(v) {
      this.value = v
    },
  },
  mounted() {
    this.value = this.defaultValue
    this.getList()
  },
  methods: {
    getList() {
      this.listQuery.courseType = this.courseType || 1
      this.listQuery.sourceType = this.sourceType
      sysCourseQuery(this.listQuery).then((res) => {
        this.options = res.data.data
      })
    },
    handleChange(value) {
      let obj = this.options.filter((v) => v.id == value)[0]
      this.$emit('emit', value, obj)
    },
  },
}
</script>